<template>
  <div>
    <!-- 悬浮框模板 -->

    <!-- 表格 -->
    <el-table :data="tableData" style="width: 100%">
      <el-table-column
        v-for="column in tableColumns"
        :key="column.prop"
        :label="column.label"
       
      >
        <template slot="header" slot-scope="scoped">
          <span class="column-header">{{ column.label }}</span>
          <el-popover placement="bottom" trigger="click" @click.native.stop>
            <div style="padding: 30px">
                <el-radio-group v-model="column.sortType" style="display: flex; flex-direction: column">
                  <el-radio label="'asc'">按A→Z排序</el-radio>
                  <el-radio style="margin-top: 10px" label="'desc'">按Z→A排序 </el-radio>
                </el-radio-group>
              
                <el-input  v-model="column.filterKeyword" placeholder="请输入筛选关键词" suffix-icon="el-icon-search"></el-input>
                <div style="text-align: right; margin-top: 10px">
                  <el-button type="primary" size="medium" @click="applyColumnChanges(column)">确定</el-button>
                </div>
              </div>
            <i slot="reference" class="el-icon-caret-bottom"></i>
          </el-popover>
        </template>
        <template slot-scope="scope">
          {{ scope.row[column.prop] }}
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <div class="bottom">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pagination.currentPage"
        :page-sizes="[10, 20, 50]"
        :page-size="pagination.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="tableData.length"
      >
      </el-pagination>
    </div>
  </div>
</template>
  
  <script>
export default {
  name: 'xw',
  data() {
    return {
      tableData: [
        {
          title: "公告标题1",
          author: "张三",
          signer: "李四",
          department: "人力资源部",
          publishDate: "2024-07-01",
        },
        {
          title: "公告标题2",
          author: "王五",
          signer: "赵六",
          department: "财务部",
          publishDate: "2024-07-02",
        },
        {
          title: "公告标题3",
          author: "钱七",
          signer: "孙八",
          department: "市场部",
          publishDate: "2024-07-03",
        },
        {
          title: "公告标题4",
          author: "周九",
          signer: "吴十",
          department: "技术部",
          publishDate: "2024-07-04",
        },
      ],
      tableColumns: [
        { prop: "title", label: "标题", sortType: "asc", filterKeyword: "" },
        { prop: "author", label: "发布人", sortType: "", filterKeyword: "" },
        { prop: "signer", label: "签发人", sortType: "", filterKeyword: "" },
        { prop: "department", label: "部门", sortType: "", filterKeyword: "" },
        {
          prop: "publishDate",
          label: "发布时间",
          sortType: "",
          filterKeyword: "",
        },
      ],
      pagination: {
        currentPage: 1,
        pageSize: 10,
      },
    };
  },
  methods: {
    updateFilterKeyword(column, event,index) {
        
    //    this.tableColumns[index].filterKeyword='4444444444444'
      

  },

    applyChanges() {
      // 应用整体排序和筛选
      console.log("应用整体排序和筛选");
    },
    applyColumnChanges(column) {
      // 这里可以处理点击确定按钮后的逻辑，例如根据 column.sortType 和 column.filterKeyword 更新 tableData
      console.log('Sort type:', column.sortType);
      console.log('Filter keyword:', column.filterKeyword);
      // 在实际应用中，根据 column.sortType 和 column.filterKeyword 更新 tableData
    },
    handleSizeChange(size) {
      // 分页大小变更
      console.log("分页大小变更", size);
    },
    handleCurrentChange(page) {
      // 当前页变更
      console.log("当前页变更", page);
    },
  },
};
</script>
  
  <style lang="scss" scoped>
.column-header {
  font-family: "PingFang SC";
  font-weight: bold;
  font-size: 18px;
  color: #333333;
}
/* 可以添加一些自定义的样式 */
.el-popover {
  background: #ffffff;
  box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
}
.el-radio__label {
  font-family: PingFang SC;
  font-weight: 500;
  font-size: 14px;
  color: #666666;
}
.custom-radio {
  display: flex;
  align-items: center; /* 垂直居中 */
}

.custom-radio .el-radio__inner {
  order: 1; /* 调整选中框位置 */
  margin-left: 8px; /* 增加一些间距 */
}

.custom-radio .el-radio__label {
  order: 2; /* 调整文本位置 */
}
.bottom {
  margin-top: 40px;
}
</style>
  